import React, { Component } from 'react'
import "./less/Toggle.less"
import {ToggleApi,QiehuanApi,MorenApi} from '../request/api'
import { withRouter } from 'react-router-dom'

class Toggle extends Component {
  state={
    ToggleArr:[],
    activeNum:0,
    showMask:false,
    newArr:[],
    title:'JAVA面试题'
  }
  render() {
    return (
      <div className='toogle_page'>
        <div className='mask' style={{display:this.state.showMask ? "flex" :'none'}}>
          <div className='left'>
            {
              this.state.ToggleArr.map((item,index)=>{
                return  <div key={index} className={this.state.activeNum ===index?'active':'btn'} onClick={this.boxFn.bind(this,index)}>{item.title}</div>  
              })
            }
           
          </div>
          <div className='right' onClick={this.rightFn.bind(this)}></div>  
        </div>
        <div className="top">
          <section>
            <span onClick={this.tiaoFn.bind(this)}> <b>默认学科</b>  - Java学科</span>
            <p> <span onClick={this.MorenFn.bind(this)}>设置默认学科</span>  <i className='iconfont icon-xiangyou'></i> </p>
          </section>
          <div className="title" onClick={this.showFn.bind(this)}>
            <h2>{this.state.title}</h2>
          </div>
        </div>
        <div className="sidebar">
          <div className="title">
            专业科目
          </div>
          <ul className="sidebar_list">
            {
              this.state.newArr.map((item,index)=>{
                return <li key={index}>{item.title}</li>
              })
            }
            
          </ul>
        </div>
      </div>
    )
  }
  MorenFn(){
    let index = this.state.activeNum
    let actionCode = this.state.ToggleArr[index].actionCode
    MorenApi({
      actionCode
    }).then(res=>{
      console.log(res)
    })
    this.props.history.go(-1)
  }
  tiaoFn(){
    this.props.history.push('/home')
  }
  rightFn(){
    this.setState({
      showMask:false
    })
  }
  showFn(){
    this.setState({
      showMask:true
    })
  }
  boxFn(index){
    this.setState({
      activeNum:index
    })
    // console.log(this.state.ToggleArr[index])
    let actionCode = this.state.ToggleArr[index].actionCode
    QiehuanApi({
      actionCode
    }).then(res=>{
      console.log(res)
      let newArr = res.data
      this.setState({
        newArr
      })
      console.log(newArr)
      let title = this.state.ToggleArr[index].title
      this.setState({
        title
      })
    })


    
  }
  componentDidMount() {
    let token = localStorage.getItem("x-auth-token")
    if (token) {
      ToggleApi().then(res => {
        console.log(res);
        this.setState({
          ToggleArr:res.data
        })
      })
    }
    console.log(this.props.location.state.exemItems)
    this.setState({
      newArr:this.props.location.state.exemItems
    })
  }
}

export default withRouter(Toggle)